<template>
	<div class="back_content_page">
		<div class="header">
			<van-nav-bar
				title="订单详情"
				left-arrow
				@click-left="onClickLeft"
				/>
		</div>
	<div>

		<div class="iMG_content">

      <div class="show_add_c">

        <!--新增 地址 -->
        <p class="add_adress_con" style="text-align:center;" @click="add_address" v-show="user_show">新增地址 </p>

        <!--地址的 展示-->
          <p class="teach_add"  v-show="!user_show" @click="add_address">
            <span>{{address.name}}</span>
            <span>{{address.mobile}}</span>
          </p>

        <p style="font-weight: bold"  v-show="!user_show" class="teach_difang">
          <van-icon name="location-o"  style="vertical-align: middle;color: #E7E7E7"/>
          <span style="margin: 0;padding: 0">{{address.details}}</span>
        </p>

      </div>


			<p style="margin-bottom: 1.5vh"><span>全部商品称重后统一进行结算</span></p>

		</div>

		<div class="share_content" v-for="(item,thr_index) in three_list" :key="thr_index">
			<div class="share_content_item" style="width: 100%;">
				<p>
					<span style="font-size: 16px;">{{item.second_name}}</span>
				</p>
				<p class="p_content_item">
					<span>{{item.three_name}}
						<span style="margin-left: 8vw;">
							规格
						</span>
					</span>
					<span style="color: #FF4242;">
						{{item.max_i}}积分
						<img src="../../assets/jia .png" @click="delete_thr(thr_index)" style="width: 5vw;vertical-align:middle;"/>
					</span>
				</p>
			</div>
		</div>




		<div class="add_content" @click="jixu_add">
			<p>继续添加</p>
		</div>



		<div class="Input_content">
			<van-cell title="预约时间" is-link  to="" @click="showPopup">
				<span>{{day_time}}</span>
			</van-cell>
			<van-cell title="留言备注"  >

        <van-cell-group>
          <van-field v-model="remark" placeholder="可描述商品状态、特殊要求等" />
        </van-cell-group>
<!--				<input-->
<!--          aria-placeholder="nihao"-->
<!--          type="text" maxlength="15" />-->
			</van-cell>
			<van-cell title="上传图片" >
				<span>收回物品放在一起拍照上传</span>
			</van-cell>
			<!--<van-cell title="留言备注" is-link to="Authentication"/>
			   <span>请选择预约上门时间</span>
		   </van-cell>

			<van-cell title="上传图片"  is-link />
			    <span>将要收回的物品放在一起拍照上传</span>
			</van-cell>-->

			<div class="Img_file_list">
				<van-uploader
			 	  v-model="fileList"
				  multiple
				  preview-size="21.1vw"
				  :max-count="4"
				/>
			</div>


			<div>
				<van-popup
				  v-model="show"
				  position="bottom"
				  :style="{ height: '60%' }"
				>
				 <slide-verify @get_three_obj = 'get_three_obj_from_child'></slide-verify>

				</van-popup>
			</div>


		</div>


			<!--底部-->
			<div class="footer_content">
				<div class="footer_one">
					<p>预估价格<span>{{yugujiage}}</span>元</p>
					<p style="color: #CCCCCC;font-weight: normal;font-size: 14px;">成交价格以实际评估为准</p>
				</div>
				<div class="footer_two">
					<van-button round type="default" :disabled="is_can_order" @click="Immediate_con" >立即预约</van-button>
				</div>
			</div>
		</div>

		<!--
           	作者：offline
           	时间：2019-10-17
           	描述：遮罩
          -->
         <div>
           <van-popup v-model="show_content"  position="bottom">

             <van-area :area-list="areaListcon" :columns-num="2" title="选择上门时间" @confirm="city" @cancel="cancel_pop"/>
           </van-popup>
         </div>


	</div>
</template>
<script>
	//组件传参
	import SlideVerify from '@/components/SlideVerify';
  import {format} from '../../utils/format.js'
//	import {comments} from '@/components/comments'
  import { Dialog } from 'vant';
	export default {
	  data() {
	    return {
	        user_show:true,
	    	  three_list:[],
	    	  show_content:false,
          remark:'',
          day_time:'请选择预约上门时间',
	    	  areaListcon:{
            province_list: {
              110000: '今天',
              120000: '明天'
            },
            city_list: {
              110100: '随时可以(9:00-21:00)',
              110200:'09:00-11:00',
              110300:'11:00-13:00',
              110400:'13:00-15:00',

              110500:'15:00-17:00',
              110600:'17:00-19:00',
              110700:'19:00-21:00',
                110800:'',


              120100: '随时可以(9:00-21:00)',
              120200:'09:00-11:00',
              120300:'11:00-13:00',
              120400:'13:00-15:00',
                120500:'15:00-17:00',
                120600:'17:00-19:00',
                120700:'19:00-21:00',
                120800:'',




            },
            county_list: {
                110101: '',
                110102: '',
                110105: '',
                110106: '',
                120101: '',
                120102: '',
                120103: '',
                120104: '',
                120105: ''
              }
			},
	         showList: false,
		      showEdit: false,
		      isEdit: false,
		      fileList:[],
		      activeName: '',
		      show:false,
		      gettime:'',
          user:'',
          address:'',
          is_can_order:true,
          reservationDay:'',
          reservationTime:'',
          yugujiage:0
		    };

	  },
    mounted(){
        const that = this;
        let local_user = localStorage.getItem("user");
        if (local_user != undefined && local_user != "undefined") {
            let user = JSON.parse(local_user);
            that.user = user;
        }
        that.get_address();
        if(that.$route.query.three_list == undefined){
            var json_obj = JSON.parse(that.$route.query.res);
            that.three_list.push(json_obj);
        }else{
            console.log("bbb");
            console.log(that.$route.query.three_list);
            that.three_list= that.$route.query.three_list;
        }
        var jine =0;
        for(var i = 0;i<that.three_list.length;i++){
            jine = jine + parseInt(that.three_list[i].max_i);
        }
        that.yugujiage = jine/100;
        console.log(that.three_list);



    },
	   methods:{
         cancel_pop(){
           this.show_content = false;
         },
         delete_thr(index){
             console.log(index);
             this.three_list.splice(index,1);
             this.yugujiage = 0;
             var jine = 0;
             for(var i = 0;i<this.three_list.length;i++){
                 jine = jine+parseInt(this.three_list[i].max_i);
             }
             this.yugujiage = jine/100;
         },
         is_can_order_func(){
             const  that = this;
             that.$sendRequest('/recycle/is_can_order',"lon="+that.address.lon+"&lat="+that.address.lat).then(function(res){
                 if(res.data.code ==0){
                    if(res.data.result.is_can_order ==1){
                        that.is_can_order =  false;
                    }else if(res.data.result.is_can_order ==0){
                        that.is_can_order =  true;
                    }
                 }else if(res.data.code ==2){

                 }
             })
         },
	      get_address(){
            const  that = this;
            this.$sendRequest('/recycle/get_address',"userId="+that.user.userId).then(function(res){
                if(res.data.code ==0){
                    console.log("AAAA");
                    console.log(res.data);
                    var adr = res.data.result.address;
                    if(adr != null){
                        that.address = adr;
                        that.user_show = false;
                        that.is_can_order_func();
                    }else{
                        that.user_show = true;
                    }
                }else if(res.data.code ==2){
                    this.$toast(res.data.msg);
                }
            })
        },
	      add_address(){
            //跳转到添加地址 页面
            console.log(this.three_list);

            this.$router.push({
                path:'/address',query:{res:this.three_list}
            })
         },
         get_three_obj_from_child(value){
	   		  console.log(value);
          console.log(1111111111);
          this.three_list.push(JSON.parse(value));
           this.yugujiage=0;
           var jifen =0;
           for(var i = 0;i<this.three_list.length;i++){
               jifen = jifen+ parseInt(this.three_list[i].max_i);
           }
           this.yugujiage = jifen/100;
           console.log(this.yugujiage);
	   		  this.show = false;
	   	  },
        city(e){
            this.reservationDay = e[0].name;
            this.reservationTime = e[1].name;
            this.show_content = false;
            this.day_time = this.reservationDay +" "+ this.reservationTime;
        },
        active(){

        },
		   	showPopup(){
		   		//获取现在的时间
          this.show_content = true;
		   		this.timeNow();


		   	},
		   	timeNow () {
  			  var _this = this;

		      let hh = new Date().getHours();
		      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
		      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();

		      _this.gettime = hh + ':' +  '00';


		      for(var i in this.areaListcon.city_list){

            if(i =='110800'){
                return false;
            }
		        if(this.areaListcon.city_list[i] == '随时可以(9:00-21:00)'){

		        }else{


		            if(_this.gettime.split(':')[0] <= this.areaListcon.city_list[i].split(':')[0] ){
		      		    return false;
		      	    }else if(_this.gettime.split(':')[0] > this.areaListcon.city_list[i].split(':')[0] &&
                    _this.gettime.split(':')[0] < this.areaListcon.city_list[i].split('-')[1].split(":")[0]){
                    return false;
                }else {
                  if(parseInt(i) == '110100'){

                  }else{
                    delete(this.areaListcon.city_list[i]);
                  }
                }
		      	}
		      }




			},
		   	address_img_er(){
		   	   this.$router.push({
		   			path:'/address'
		   		})
		   	},
		   	onClickLeft(){
            this.$router.push({
                path: "/recycling"
            });
		   	},
        //立即预约
	    	Immediate_con(){
            const that = this;
            var userId = that.user.userId;
            console.log("userId:"+userId);
            var addrId  = that.address.addrId;
            if(userId =='' || userId ==null || userId == 'undefined'){
                Dialog.confirm({
								    title: '',
								    message: '请您先进行登录'
								}).then(() => {
								    // on confirm
								    this.$router.push({
								        path:'/'
								    })
								}).catch(() => {
								    // on cancel
								});
                return false;
            }
            if(addrId =='' || addrId == null || addrId == 'undefined'){
                this.$toast("请选择地址");
                return false;
            }

            var three_ids = "";
            for (var i = 0;i<that.three_list.length;i++){
                three_ids+=that.three_list[i].three_id+",";
            }
            if(three_ids != ''){
                three_ids = three_ids.substring(0,three_ids.length-1);
            }
            if(three_ids =='' || three_ids ==null || three_ids == 'undefined'){
                this.$toast("请选择商品");
                return false;
            }


            var reservationDay_p = this.get_today_or_tomorrow();
            var reservationTime_p = this.get_hours_check();
            var remark = that.remark;
            if(reservationDay_p ==''){
                this.$toast("请选择预约时间");
                return false;
            }
            if(that.fileList.length == 0){
                this.$toast("请至少选择一张图片");
                return false;
            }


            let formData = new FormData();
            formData.append("userId",userId);
            formData.append("addressId",addrId);
            formData.append("threeIds",three_ids);
            formData.append("reservationDay",reservationDay_p);
            formData.append("reservationTime",reservationTime_p);
            formData.append("remark",remark);
            for(var i = 0;i<that.fileList.length;i++){
                formData.append("pic"+(i+1),that.fileList[i].file);
            }
            that.$sendRequest('/recycle/sub_reservation_order',formData).then(function(res){
                if(res.data.code ==0){
                    Dialog.alert({
                        message: '提交订单成功，等待上门回收'
                    }).then(() => {
                        that.$router.push({
                            path: '/banner'
                        })
                    });

                }else if(res.data.code ==2){
                    that.$toast(res.data.msg);
                }
            })


	    	},
         get_today_or_tomorrow(){
             var day1 = new Date();
             if(this.reservationDay =='今天'){
                 day1.setDate(day1.getDate() );
             }else if(this.reservationDay =='明天'){
                 day1.setDate(day1.getDate() +1);
             }else{
                 return "";
             }
             var s1 = day1.format("yyyy-MM-dd");
            return s1;
         },
         get_hours_check(){
             var hours = this.reservationTime;
             if(hours.indexOf("(") != -1){
                 return hours.substring(hours.indexOf("(")+1,hours.indexOf(")"));
             }
             return hours;
         },
	    	jixu_add(){
	    		this.show = true;

	    	}
	   },
	  components: {
   			 SlideVerify,

  		}
   };
</script>
<style scoped="scoped">
	.p_content_item{
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
  .Input_content >>> .van-field__control{
    text-align: right;
  }
  .Input_content >>> .van-field{
	  padding-right: 0;
  }
  .van-cell__value{
	flex: 50%;
  }
  .back_content_page >>>[class*=van-hairline]::after{
  	border: 0 solid #FFFFFF !important;
  }
  .Img_file_list{
  	margin-bottom: 11vh;
  }
  .teach_add{

    font-family:PingFang SC;
    font-weight:600;
    color:#000000;
	padding-left: 1.4vh;
    padding-top: 1.2vh;
  }
  .teach_difang{
	padding-top: 0.5vh;
	padding-left: 1.8vh;
  }
  .teach_add span:nth-child(1){
    font-size:15px !important;
  }
  .teach_add span{
    font-weight: bold;
    font-size:14px !important;
  }
  .show_add_c{
    margin-top: 1vh;
    height: 13vh;
    padding: 2vw;
    background-image: url("../../assets/address.png");
    background-size:100%;
    background-repeat: no-repeat;
  }
	.back_content_page{
		text-align: left !important;
	}
  .add_adress_con{
    text-align: center;
    vertical-align: middle;
    font-family:PingFang SC;
    font-weight:600;
    color:rgba(51,51,51,1);
    line-height:60px;
  }
	p{
		margin: 0;
		padding: 0;
	}
	.add_address{
		position: absolute;
		top:50%;
		left: 50%;
	}
	.help_content >>> .van-cell__title{
		text-align: left;
		padding-left: 3vh;
	}
	.help_content>>>.van-collapse-item__content{
		text-align: left;
		padding-left: 5.4vh;
	}
	.chan_question{
		margin-top: 1vh;
		text-align: left;
	    padding-left: 3vh;
	    color: #000;
	    font-weight: 600;
	    background: #FFFFFF;
	    padding: 1vh;
	}
	.back_content_page{
		background: rgb(245,245,245);
	}
	.back_content_page >>> .van-tabs__content{
		background: #fff;
	    text-align: left;
	    padding: 3vh;
	}
	.type_xing{
		color: #CCCCCC;
		font-size: 14px;
	}
	.back_content_page >>> .van-button{
		margin-bottom: 1vh;
		margin-top: 1vh;
	}
	.footer_content{
    position: fixed;
    width: 100%;
    bottom: 0;
		align-items: center;
		background: #FFFFFF;
		padding-top: 3vh;
		display: flex;
		justify-content: space-around;

	}
	.footer_one p{
		font-size: 18px;
		font-weight: bold;
		color: #000000;
	}
	.footer_one p span{
		color: rgb(255,66,66);
	}
	.footer_content >>> .van-button__text{
		padding: 0 5vh;
	}
	.footer_content >>>.van-button{
		background: #4C9FFD;
		color: #FFFFFF;
	}
	.iMG_content img{
		width: 100%;
		margin-top: 1vh;
	}

	.iMG_content p{
		text-align: left;
		 margin-top: 0.5vh;
	    margin-bottom: 0.5vh;
	}
	.iMG_content p span{
		color: #666666;

	    margin-left: 1vw;
	    font-size: 12px;

	}
	.share_content{
		background: #FFFFFF;
		padding-left: 1vh;
		display: flex;
		border-bottom: 1px solid #F6F6F6;
		justify-content: space-between;

	}
	.share_content div{
		margin: 1.5vh;
        font-size: 14px;
	}
	.p_content_item{

		margin-top: 1vh;
	}
	.p_content_item span:nth-child(1){
		color: #CCCCCC;
	}
	.add_content{
		height: 6vh;
		line-height: 6vh;
		background: #FFFFFF;
		text-align: center;
		font-weight: bold;
		margin-bottom: 2vh;
	}
	.Img_file_list{
		background: #FFFFFF;
		padding: 12px;
	}
	.header >>> .van-icon-arrow-left {
		color: #2c3e50;
	}
	/* .van-uploader__wrapper >>> .van-uploader__preview {
		position: relative;
		margin: 0 7px 7px 0 !important ;
	} */
 </style>

